<template>
    <div id="footer">
        <ul>
            <router-link tag="li" to="/product">
                <p>商品列表</p>
            </router-link>
            <router-link tag="li" to="/shopcart">
                <p>购物车</p>
            </router-link>
        </ul>
    </div>
</template>
<script>
    export default{
        name:'TabBar',

    }
</script>
<style scoped>
    #footer{
        position: fixed;
        bottom: 0px;
        width: 100%;
        background: #fff;
        border-top: 2px solid #ccc;
    }
    li{
        display: inline-block;
        width: 50%;
        text-align: center;
        padding: 15px 0;
    }
    .router-link-active{
        color: #F18741;
        background: #FEF5EF;
    }
</style>